<div class="row clearfix" [@routerTransition]>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="header">
                <h2>{{ "Roles" | localize }}</h2>
                <ul class="header-dropdown m-r--5">
                    <li>
                        <button mat-icon-button [matMenuTriggerFor]="headerMenu" class="header-dropdown-mat-icon-button">
                            <mat-icon>more_vert</mat-icon>
                        </button>
                        <mat-menu #headerMenu="matMenu">
                            <button mat-menu-item (click)="refresh()">
                                <mat-icon>refresh</mat-icon>
                                <span>{{ "Refresh" | localize }}</span>
                            </button>
                        </mat-menu>
                    </li>
                </ul>
            </div>
            <div class="body table-responsive">
                <!--query start-->
                <div class="row clearfix">
                    <form>
                        <mat-form-field>
                            <input matInput [placeholder]="l('Filter')" [(ngModel)]="keyword" name="keyword">
                        </mat-form-field>

                        <div class="row">
                            <div class="col-md-12 text-right p-r-25">
                                <button mat-raised-button color="primary" (click)="getDataPage(1)">{{ 'Search' | localize }}</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--query end-->
                <table class="table table-hover table-striped" [busy]="isTableLoading">
                    <thead>
                        <tr>
                            <th>{{ "RoleName" | localize }}</th>
                            <th>{{ "DisplayName" | localize }}</th>
                            <th>{{ "Actions" | localize }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="
                let role of (roles
                  | paginate
                    : {
                        id: 'server',
                        itemsPerPage: pageSize,
                        currentPage: pageNumber,
                        totalItems: totalItems
                      })
              ">
                            <td>{{ role.name }}</td>
                            <td>{{ role.displayName }}</td>
                            <td>
                                <button class="action-button" mat-icon-button [matMenuTriggerFor]="actionsMenu">
                                    <mat-icon>menu</mat-icon>
                                </button>
                                <mat-menu #actionsMenu="matMenu">
                                    <button mat-menu-item (click)="editRole(role)">
                                        <mat-icon>edit</mat-icon>
                                        <span>{{ "Edit" | localize }}</span>
                                    </button>
                                    <button mat-menu-item (click)="delete(role)">
                                        <mat-icon>delete</mat-icon>
                                        <span>{{ "Delete" | localize }}</span>
                                    </button>
                                </mat-menu>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="abp-pagination-controls-wrapper" *ngIf="totalItems > pageSize">
                    <abp-pagination-controls (pageChange)="getDataPage($event)" id="server">
                    </abp-pagination-controls>
                </div>
                <button mat-mini-fab color="primary" class="pull-right" (click)="createRole()">
                    <mat-icon>add</mat-icon>
                </button>
            </div>
        </div>
    </div>
</div>
